<template>
  <div>
    <el-table :data="tableData" size="small" v-loading="loading">
      <el-table-column type="index" label="编号" width="100"></el-table-column>
      <el-table-column prop="img" label="封面图片" align="center" width="150">
        <template slot-scope="scope">
          <el-image
            style="width: 115px; height: 60px"
            :src="scope.row.imageUrl"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column
        prop="updateTime"
        label="更新时间"
        width="140"
      ></el-table-column>
      <el-table-column
        prop="isShow"
        label="是否启用"
        width="140"
        align="center"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isShow"
            active-text="开"
            :active-value="1"
            inactive-text="关"
            :inactive-value="0"
            @change="() => handleClick('switch', scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <div>
            <a
              :href="`${viewPath}/news/detail?type=1&id=${scope.row.id}`"
              target="_blank"
            >
              <el-button type="text" size="small">预览</el-button>
            </a>
            <el-divider direction="vertical"></el-divider>
            <router-link
              :to="{ name: 'EditNewsPage', params: { id: scope.row.id } }"
            >
              <el-button type="text" size="small">编辑</el-button>
            </router-link>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              size="small"
              @click="() => handleClick('delete', scope.row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { viewPath } from "@/utils/config.js";

export default {
  name: "TableList",
  props: ["tableData", "loading", "totalSize"],
  data() {
    return {
      viewPath,
    };
  },
  methods: {
    handleClick(type, row) {
      switch (type) {
        case "switch":
          this.$emit("click", { eventType: type, ...row });
          break;
        case "delete":
          this.$emit("click", { eventType: type, ...row });
          break;
      }
    },
  },
  mounted() {
    console.log(this.$env);
  },
};
</script>
